<template>
    <div class="wrapper">
      <!-- header部分 -->
      <header>
        <p>商家列表</p>
      </header>
  
      <!-- 商家列表部分 -->
      <ul class="business">
        <li
          v-for="item in businessArr"
          :key="item.businessId"
          @click="toBusinessInfo(item.businessId)"
        >
          <div class="business-img">
            <img :src="item.businessImg" />
            <div class="business-img-quantity" v-show="item.quantity > 0">
              {{ item.quantity }}
            </div>
          </div>
          <div class="business-info">
            <h3>{{ item.businessName }}</h3>
            <p>
              &#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送
            </p>
            <p>{{ item.businessExplain }}</p>
          </div>
        </li>
      </ul>
  
      <!-- 底部菜单部分 -->
      <Footer></Footer>
    </div>
  </template>
  
  <script setup>
  import Footer from "../components/Footer.vue";
  import qs from "qs";
  import { useRouter, useRoute } from "vue-router";
  import { ref, inject } from "vue";
  import { getSessionStorage } from "../common.js";
  
  const axios = inject("axios");
  const router = useRouter();
  const route = useRoute();
  
  const user = getSessionStorage("user");
  const orderTypeId = route.query.orderTypeId;
  const businessArr = ref([]); //使用reactive声明的响应式数据不能改变其引用
  
  const init = () => {
    axios
      .post(
        "BusinessController/listBusinessByOrderTypeId",
        qs.stringify({
          orderTypeId: orderTypeId,
        })
      )
      .then((response) => {
        businessArr.value = response.data;
        //判断是否登录
        if (user != null) {
          listCart();
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };
  init();
  
  const listCart = () => {
    axios
      .post(
        "CartController/listCart",
        qs.stringify({
          userId: user.userId,
        })
      )
      .then((response) => {
        let cartArr = response.data;
        //遍历所有食品列表
        for (let businessItem of businessArr.value) {
          businessItem.quantity = 0;
          for (let cartItem of cartArr) {
            if (cartItem.businessId == businessItem.businessId) {
              businessItem.quantity += cartItem.quantity;
            }
          }
        }
        //this.businessArr.sort();
      })
      .catch((error) => {
        console.error(error);
      });
  };
  
  const toBusinessInfo = (businessId) => {
    router.push({
      path: "/businessInfo",
      query: { businessId: businessId },
    });
  };
  
  /*
  export default {
    name: "BusinessList",
    data() {
      return {
        orderTypeId: this.$route.query.orderTypeId,
        businessArr: [],
        user: {},
      };
    },
    created() {
      this.user = this.$getSessionStorage("user");
  
      //根据orderTypeId查询商家信息
      this.$axios
        .post(
          "BusinessController/listBusinessByOrderTypeId",
          this.$qs.stringify({
            orderTypeId: this.orderTypeId,
          })
        )
        .then((response) => {
          this.businessArr = response.data;
          //判断是否登录
          if (this.user != null) {
            this.listCart();
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    components: {
      Footer,
    },
    methods: {
      listCart() {
        this.$axios
          .post(
            "CartController/listCart",
            this.$qs.stringify({
              userId: this.user.userId,
            })
          )
          .then((response) => {
            let cartArr = response.data;
            //遍历所有食品列表
            for (let businessItem of this.businessArr) {
              businessItem.quantity = 0;
              for (let cartItem of cartArr) {
                if (cartItem.businessId == businessItem.businessId) {
                  businessItem.quantity += cartItem.quantity;
                }
              }
            }
            this.businessArr.sort();
          })
          .catch((error) => {
            console.error(error);
          });
      },
      toBusinessInfo(businessId) {
        this.$router.push({
          path: "/businessInfo",
          query: { businessId: businessId },
        });
      },
    },
  };
  */
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
    width: 100%;
    height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097ff;
    color: #fff;
    font-size: 4.8vw;
  
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
  
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /****************** 商家列表部分 ******************/
  .wrapper .business {
    width: 100%;
    margin-top: 12vw;
    margin-bottom: 14vw;
  }
  
  .wrapper .business li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: solid 1px #ddd;
    user-select: none;
    cursor: pointer;
  
    display: flex;
    align-items: center;
  }
  
  .wrapper .business li .business-img {
    /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
    position: relative;
  }
  
  .wrapper .business li .business-img img {
    width: 20vw;
    height: 20vw;
  }
  
  .wrapper .business li .business-img .business-img-quantity {
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    /*设置成绝对定位，不占文档流空间*/
    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
  }
  
  .wrapper .business li .business-info {
    margin-left: 3vw;
  }
  
  .wrapper .business li .business-info h3 {
    font-size: 3.8vw;
    color: #555;
  }
  
  .wrapper .business li .business-info p {
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
  }
  </style>